<template>
  <div class="refund-page">
    <!-- 页面标题 -->
    <div class="page-header">
      <div class="header-left">
        <h2>退款管理</h2>
        <p class="subtitle">管理退款申请和退款记录</p>
      </div>
    </div>

    <!-- 退款管理表格 -->
    <a-card :bordered="false">
      <!-- 搜索表单 -->
      <a-form :model="searchForm" layout="inline" class="search-form">
        <a-form-item field="orderNo" label="订单编号">
          <a-input
            v-model="searchForm.orderNo"
            placeholder="请输入订单编号"
            allow-clear
          />
        </a-form-item>
        <a-form-item field="status" label="退款状态">
          <a-select
            v-model="searchForm.status"
            placeholder="请选择退款状态"
            allow-clear
          >
            <a-option value="pending">待处理</a-option>
            <a-option value="processing">处理中</a-option>
            <a-option value="success">已完成</a-option>
            <a-option value="rejected">已拒绝</a-option>
          </a-select>
        </a-form-item>
        <a-form-item field="dateRange" label="申请时间">
          <a-range-picker v-model="searchForm.dateRange" />
        </a-form-item>
        <a-form-item>
          <a-space>
            <a-button type="primary" @click="handleSearch">
              <template #icon><icon-search /></template>
              搜索
            </a-button>
            <a-button @click="handleReset">
              <template #icon><icon-refresh /></template>
              重置
            </a-button>
          </a-space>
        </a-form-item>
      </a-form>

      <!-- 表格工具栏 -->
      <div class="table-toolbar">
        <a-button type="primary" status="success" @click="handleExport">
          <template #icon><icon-download /></template>
          导出记录
        </a-button>
      </div>

      <!-- 退款表格 -->
      <a-table
        :loading="loading"
        :data="refundList"
        :pagination="pagination"
        @page-change="handlePageChange"
      >
        <template #columns>
          <a-table-column title="订单编号" data-index="orderNo" />
          <a-table-column title="商品信息" data-index="productInfo">
            <template #cell="{ record }">
              <div class="product-info">
                <a-avatar :size="40" :src="record.productImage" />
                <div class="product-detail">
                  <div class="product-name">{{ record.productName }}</div>
                  <div class="product-specs">{{ record.productSpecs }}</div>
                </div>
              </div>
            </template>
          </a-table-column>
          <a-table-column title="退款金额" data-index="refundAmount">
            <template #cell="{ record }">
              <span class="amount">¥{{ record.refundAmount }}</span>
            </template>
          </a-table-column>
          <a-table-column title="退款原因" data-index="refundReason" />
          <a-table-column title="申请时间" data-index="createTime" />
          <a-table-column title="状态" data-index="status">
            <template #cell="{ record }">
              <a-tag :color="getStatusColor(record.status)">
                {{ getStatusText(record.status) }}
              </a-tag>
            </template>
          </a-table-column>
          <a-table-column title="操作" width="200">
            <template #cell="{ record }">
              <a-space>
                <template v-if="record.status === 'pending'">
                  <a-button
                    type="primary"
                    size="small"
                    @click="handleApprove(record)"
                  >
                    同意
                  </a-button>
                  <a-button
                    type="primary"
                    status="danger"
                    size="small"
                    @click="handleReject(record)"
                  >
                    拒绝
                  </a-button>
                </template>
                <a-button
                  type="text"
                  size="small"
                  @click="handleDetail(record)"
                >
                  查看详情
                </a-button>
              </a-space>
            </template>
          </a-table-column>
        </template>
      </a-table>
    </a-card>

    <!-- 拒绝退款弹窗 -->
    <a-modal
      v-model:visible="rejectVisible"
      title="拒绝退款"
      @ok="handleRejectConfirm"
      @cancel="rejectVisible = false"
    >
      <a-form :model="rejectForm" layout="vertical">
        <a-form-item field="reason" label="拒绝原因">
          <a-textarea
            v-model="rejectForm.reason"
            :rows="4"
            placeholder="请输入拒绝原因"
          />
        </a-form-item>
      </a-form>
    </a-modal>
  </div>
</template>

<script setup>
import { ref, reactive } from "vue";
import { Message } from "@arco-design/web-vue";
import { useRouter } from "vue-router";
import {
  IconSearch,
  IconRefresh,
  IconDownload,
} from "@arco-design/web-vue/es/icon";

const router = useRouter();
const loading = ref(false);
const rejectVisible = ref(false);
const currentRefund = ref(null);

// 搜索表单
const searchForm = reactive({
  orderNo: "",
  status: "",
  dateRange: [],
});

// 拒绝表单
const rejectForm = reactive({
  reason: "",
});

// 表格数据
const refundList = ref([
  {
    id: 1,
    orderNo: "SO2024031500001",
    productImage: "https://example.com/image1.jpg",
    productName: "特色桂花糕",
    productSpecs: "规格：500g/盒",
    refundAmount: "299.00",
    refundReason: "商品质量问题",
    createTime: "2024-03-15 12:34:56",
    status: "pending",
  },
  // 更多退款数据...
]);

// 分页配置
const pagination = reactive({
  total: 100,
  current: 1,
  pageSize: 10,
  showTotal: true,
  showJumper: true,
});

// 获取状态颜色
const getStatusColor = (status) => {
  const colorMap = {
    pending: "orange",
    processing: "blue",
    success: "green",
    rejected: "red",
  };
  return colorMap[status] || "default";
};

// 获取状态文本
const getStatusText = (status) => {
  const textMap = {
    pending: "待处理",
    processing: "处理中",
    success: "已完成",
    rejected: "已拒绝",
  };
  return textMap[status] || "未知状态";
};

// 处理搜索
const handleSearch = () => {
  loading.value = true;
  // TODO: 调用搜索API
  setTimeout(() => {
    loading.value = false;
    Message.success("搜索成功");
  }, 1000);
};

// 处理重置
const handleReset = () => {
  searchForm.orderNo = "";
  searchForm.status = "";
  searchForm.dateRange = [];
  handleSearch();
};

// 处理分页
const handlePageChange = (page) => {
  pagination.current = page;
  handleSearch();
};

// 导出记录
const handleExport = () => {
  Message.success("开始导出退款记录");
};

// 同意退款
const handleApprove = (record) => {
  Message.info({
    content: "确认同意退款吗？",
    closable: true,
    onOk: () => {
      // TODO: 调用同意退款API
      Message.success("已同意退款");
      handleSearch();
    },
  });
};

// 拒绝退款
const handleReject = (record) => {
  currentRefund.value = record;
  rejectForm.reason = "";
  rejectVisible.value = true;
};

// 确认拒绝
const handleRejectConfirm = () => {
  if (!rejectForm.reason) {
    Message.error("请输入拒绝原因");
    return;
  }
  // TODO: 调用拒绝退款API
  Message.success("已拒绝退款");
  rejectVisible.value = false;
  handleSearch();
};

// 查看详情
const handleDetail = (record) => {
  router.push({
    name: "MerchantOrderDetail",
    params: { id: record.id },
  });
};
</script>

<style lang="scss" scoped>
.refund-page {
  .page-header {
    @apply flex items-center justify-between mb-6;

    h2 {
      @apply text-xl font-medium mb-1;
    }

    .subtitle {
      @apply text-gray-500 text-sm;
    }
  }

  .search-form {
    @apply mb-4;
  }

  .table-toolbar {
    @apply flex justify-between items-center mb-4;
  }

  .product-info {
    @apply flex items-center;

    .product-detail {
      @apply ml-3;

      .product-name {
        @apply font-medium mb-1;
      }

      .product-specs {
        @apply text-gray-500 text-sm;
      }
    }
  }

  .amount {
    @apply font-medium text-danger-600;
  }
}
</style>
